<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>主页</title>
	<!-- 引入Mui -->
	<link rel="stylesheet" href="css/mui.min.css">
	<!-- 引入公共样式 -->
	<link rel="stylesheet" href="css/public.css">
	<style>
		 *{ touch-action: pan-y; } 
		 .medai_list .tish{
			 position: absolute;
			 right: 10px;
			 bottom: 8px;
		 }
	</style>
</head>
<body >
	<!-- 头部 -->
	<header id="header" class="mui-bar mui-bar-nav">
		<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
		<h1 class="mui-title">首页</h1>
	</header>
	<!-- 头部 结束 -->
	<div class="mui-content mui-scroll-wrapper" id="main">
		<div class="mui-scroll">
			<!-- slide开始 -->
			<div class="mui-slider" id="slider">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item"><img src="img/slide2.jpg"></div>  <!-- 末尾结点-->	
					<div class="mui-slider-item"><img src="img/slide1.jpg"></div>
					<div class="mui-slider-item"><img src="img/slide2.jpg"></div>
					<div class="mui-slider-item"><img src="img/slide1.jpg"></div>   <!--开始结点-->
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<!--slide 结束-->
			<!-- nav开始 -->
			<nav>
				<ul class="mui-table-view mui-grid-view mui-grid-9 super_link">
					<li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
						<a href="about.html">
							<span class="mui-icon mui-icon-compose"></span>
							<div class="mui-media-body">平台简介</div>
						</a>
					</li>
					<li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
						<a href="make_money.html">
							<span class="mui-icon mui-icon-pengyouquan"></span>
							<div class="mui-media-body">如何赚钱</div>
						</a>
					</li>
					<li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
						<a href="video_on.html">
							<span class="mui-icon mui-icon-videocam"></span>
							<div class="mui-media-body">视频讲解</div>
						</a>
					</li>
					<li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
						<a href="notice.html">
							<span class="mui-icon mui-icon-compose"></span>
							<div class="mui-media-body">公告</div>
						</a>
					</li>
				</ul>
			</nav>
			<!-- nav结束 -->
			<!-- 图文列表开始 -->
			<div class="medai_list" id="medai_list">
				<ul class="mui-table-view mui-table-view-chevron super_link">
					<li class="mui-table-view-cell mui-media">
						<a href="tasks_detail.html" class="mui-navigate-right">
							<img src="img/task.jpg"  class="mui-media-object mui-pull-left">
							<div class="mui-media-body">
								<h4>任务1</h4>
								<p>已抢:<b class='mui-badge mui-badge-inverted mui-badge-danger'>1200</b>/ <b class="mui-badge mui-badge-inverted mui-badge-danger">2000</b></p>
								<p>￥<span>20</span> 元</p>
								<h6>任务描述</h6>
								<div class="mui-badge mui-badge-danger tish">任务进行中</div>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="tasks_detail.html" class="mui-navigate-right">
							<img src="img/task.jpg"  class="mui-media-object mui-pull-left">
							<div class="mui-media-body">
								<h4>任务2</h4>
								<p>已抢:<b class='mui-badge mui-badge-inverted mui-badge-danger'>1200</b>/ <b class="mui-badge mui-badge-inverted mui-badge-danger">2000</b></p>
								<p>￥<span>20</span> 元</p>
								<h6>任务描述</h6>
								<div class="mui-badge mui-badge-success tish">任务已完成</div>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="tasks_detail.html" class="mui-navigate-right">
							<img src="img/task.jpg"  class="mui-media-object mui-pull-left">
							<div class="mui-media-body">
								<h4>任务2</h4>
								<p>已抢:<b class='mui-badge mui-badge-inverted mui-badge-danger'>1200</b>/ <b class="mui-badge mui-badge-inverted mui-badge-danger">2000</b></p>
								<p>￥<span>20</span> 元</p>
								<h6>任务描述</h6>
								<div class="mui-badge mui-badge-primary tish">任务未开始</div>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="tasks_detail.html" class="mui-navigate-right">
							<img src="img/task.jpg"  class="mui-media-object mui-pull-left">
							<div class="mui-media-body">
								<h4>任务2</h4>
								<p>已抢:<b class='mui-badge mui-badge-inverted mui-badge-danger'>1200</b>/ <b class="mui-badge mui-badge-inverted mui-badge-danger">2000</b></p>
								<p>￥<span>20</span> 元</p>
								<h6>任务描述</h6>
								<div class="mui-badge mui-badge-primary tish">任务未开始</div>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="tasks_detail.html" class="mui-navigate-right">
							<img src="img/task.jpg"  class="mui-media-object mui-pull-left">
							<div class="mui-media-body">
								<h4>任务2</h4>
								<p>已抢:<b class='mui-badge mui-badge-inverted mui-badge-danger'>1200</b>/ <b class="mui-badge mui-badge-inverted mui-badge-danger">2000</b></p>
								<h6>任务描述</h6>
								<div class="mui-badge mui-badge-primary tish">任务未开始</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<!-- 图文列表结束 -->
		</div>
	</div>
	<!-- 底部Tab 开始 -->
	<nav class="mui-bar mui-bar-tab super_link">
		<a class="mui-tab-item mui-active" href="index.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="my_tasks.html">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">我的任务</span>
		</a>
		<a class="mui-tab-item" href="issue.html">
			<span class="mui-icon mui-icon-paperplane"></span>
			<span class="mui-tab-label">发圈</span>
		</a>
		<a class="mui-tab-item" href="shop.html">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">招商</span>
		</a>
		<a class="mui-tab-item" href="user.html">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部Tba 结束 -->
	<script src="js/jquery.min.js"></script> 
	<script src="js/mui.min.js"></script>
	<script src="js/doT.js"></script>
	<!-- 以上为引入第三方插件 -->
	<script src="js/public.js"></script> 
	<script type="text/javascript">
		//初始化 mui 轮播效果
		mui('#slider').slider({
			interval:3000 // slider间隔时间
		})
		//初始化Mui
		mui.init({
			pullRefresh : {
				container:"#main",
				// 下拉刷新
				down : {
					style:'circle',
					callback :function(){
						setTimeout(function() {
							mui('#main').pullRefresh().endPulldownToRefresh();
							_getdata('/asd/asd/',function(data){

							});
							// mui.toast("已经显示最新数据");
						}, 1500);
					}
				},
				// 上拉加载
				up : {
					contentrefresh :"正在加载...",
					contentnomore:"没有更多数据了",
					callback : function(e){
						setTimeout(function(){
							_getdata('/asd/asd/',function(data){

							});
							mui('#main').pullRefresh().endPullupToRefresh(true); //有数据穿 false 反之 true
						},1500)
					}
				}
			}
		});
	</script>
</body>
</html>